<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>参数设置</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.4/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/be_current.css">
    <link rel="stylesheet" href="../static/css/setting.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>


</head>
<body class="bg-gray-100">

<!-- 右上角按钮容器 -->
<div class="top-right-buttons">
<!--    <span class="navbar-text" id="username-display">用户:{{current_user()}}</span>-->
    <!-- 切换导航栏按钮 -->
    <button class="toggle-sidebar-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        <i class="glyphicon glyphicon-list"></i>
    </button>
</div>
<!-- 侧边导航栏 -->
<div class="sidebar bg-gray-800 text-white flex flex-col justify-between h-screen">
    <!-- 导航栏顶部 -->
    <div>
        <div class="text-center py-4 border-b border-gray-700">
            <a href="#" class="text-blue-400 font-bold">新零售配送优化</a>
        </div>
        <div class="mt-4">
            <a href="" class="block px-4 py-3 hover:bg-gray-700 ">用户:{{current_user()}}</a>
            <a href="/optimize" class="block px-4 py-3 hover:bg-gray-700">路径优化</a>
            <a href="/history" class="block px-4 py-3 hover:bg-gray-700">历史记录</a>
            <a href="/setting" class="block px-4 py-3 hover:bg-gray-700">路径优化参数设置</a>
            <a href="/help" class="block px-4 py-3 hover:bg-gray-700">帮助/说明页</a>
        </div>
    </div>

    <!-- 导航栏底部 包含切换按钮  -->
    <div>
        <a href="/feedback" class="block px-4 py-3 hover:bg-gray-700">反馈与建议</a>
        <a href="/logout" class="block px-4 py-3 hover:bg-gray-700" onclick="confirmLogout(event)">退出登录</a>

    </div>
</div>
<!-- 主体内容 -->
<div class="container d-flex justify-content-center align-items-center ">
    <div class="col-12 col-md-8 col-lg-6">
        <!-- 表单列 -->
        <form id="commit_form" method="post" class="mx-auto">


            <div class="mb-3">
                <label for="populationSize" class="form-label">种群大小 (POPULATION_SIZE)</label>
                <input type="number" id="populationSize" name="population_size" class="form-control"
                       placeholder="1000" min="1" value="1000" required oninput="validateNumber(this);">
            </div>
            <div class="mb-3">
                <label for="nGenerations" class="form-label">代数 (N_GENERATIONS)</label>
                <input type="number" id="nGenerations" name="n_generations" class="form-control" placeholder="100"
                       min="1" value="100" required oninput="validateNumber(this);">
            </div>
            <div class="mb-3">
                <label for="maxCapacity" class="form-label">最大容量 (MAX_CAPACITY)</label>
                <input type="number"  id="maxCapacity" name="max_capacity" class="form-control"
                       placeholder="100"
                       min="1" value="100" required oninput="validateNumber(this);">
            </div>
            <div class="mb-3">
                <label for="mutationRate" class="form-label">变异率 (MUTATION_RATE)</label>
                <input type="number" step="0.1" id="mutationRate" name="mutation_rate" class="form-control"
                       placeholder="0.5" min="0" max="1" value="0.5" required oninput="validateNumber(this);">
            </div>
            <div class="text-center">
                <input type="submit" value="更新设置"
                       class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                       id="submit">
                {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                {% for category, message in messages %}
                <div class="flash-{{ category }}">{{ message }}</div>
                {% endfor %}
                {% endif %}
                {% endwith %}
            </div>


        </form>
        <div id="notifications-panel" class="notifications-panel">
            <!-- 通知消息将在这里动态插入 -->
        </div>
    </div>
</div>

<script src="../static/js/setting.js"></script>
<script src="../static/js/be_current.js"></script>
<script src="../static/js/logout.js"></script>
</body>
</html>
